import React, { useEffect, useState, useRef } from 'react';

import styles from './index.less';

import { request, history } from 'umi';

import { IList, Ilous } from '../utils/interface';


interface Iapp {
  // onclickLouq:(index:number) => void,
  onclickLou: (index: number) => void,
  onclickXi: (id: string) => void,
}

const IndexPage: React.FC<Iapp> = () => {
  const [list, setList] = useState<IList[]>([]);
  const [arr, setArr] = useState<string[]>([]);
  const [err, setErr] = useState<Ilous[]>([]);
  const [flag, setFlag] = useState<number>(0);
  const uR = useRef(null)
  useEffect(() => {
    request('/v2-car-getMasterBrandList.html').then(res => {
      // console.log('res',res);
      res.code == 1 ? setList(res.data) : ""
    });
  }, []);
  useEffect(() => {

  }, []);
  list.forEach(item => {
    arr.push(item.Spelling.slice(0, 1));
  });
  // const onclickLou = (i: number) => {
  //   console.log(i);
  //   let crr = document.querySelectorAll('h5');
  //   crr[i].scrollIntoView({
  //     behavior: "smooth"
  //   })
  // };

  // 滚动
  function onTachstate(e: React.TouchEvent<HTMLSpanElement>, i: number) {

    // console.log(e.targetTouches[0].pageX);
    // console.log(e.targetTouches[0].pageY);
    let crr = document.querySelectorAll('h5');
    crr[i].scrollIntoView({
      behavior: "smooth"
    })
  }
  function onTachmove(e: React.TouchEvent<HTMLSpanElement>, i: number) {
    // console.log((e.target as any).innerHTML); 
    // console.log(e.targetTouches[0].clientY-100);
    // console.log(i)
    if ((e.targetTouches[0].clientY - (100 + 20 * i)) / 20 > 0) {
      let crr = document.querySelectorAll('h5');
      let j = i + Math.floor((e.targetTouches[0].clientY - (100 + 20 * i)) / 20);
      if (j < 0) j == 0;
      // console.log(j)
      crr[j].scrollIntoView({
        behavior: "smooth"
      })
    }

  }
  function onTachend(e: React.TouchEvent<HTMLSpanElement>, i: number) {
    // console.log((e.target as any).innerHTML);
  }

  // 右侧拖拽
  function onTachstates(e: React.TouchEvent<HTMLSpanElement>) {

    setFlag(e.targetTouches[0].pageX);

  }
  function onTachmoves(e: React.TouchEvent<HTMLSpanElement>) {
    // console.log((e.target as any).innerHTML); 
    // console.log(e.targetTouches[0].clientY-100);
    // console.log(e.targetTouches[0].pageX);
    if (e.targetTouches[0].pageX - flag <= 0) {
      (uR.current as unknown as HTMLElement).style.right = 0 + 'px'
    } else {
      (uR.current as unknown as HTMLElement).style.right = 0 - (e.targetTouches[0].pageX - flag) + 'px'
    }


  }
  function onTachends(e: React.TouchEvent<HTMLSpanElement>) {

    let len = (uR.current as unknown as HTMLElement).style.right;
    // console.log(len);
    if (Number(len.slice(0, len.length - 2)) < -200) {
      (uR.current as unknown as HTMLElement).style.right = -280 + 'px'
    }
    setFlag(0)
  }


  // 出现右侧弹框
  const onclickXi = (id: string) => {
    // console.log(id);
    request('/v2-car-getMakeListByMasterBrandId.html/', { params: { MasterID: id } }).then(res => {
      // console.log('res', res.data);
      setErr(res.data);
    });
    // setFlag(!flag)
    (uR.current as unknown as HTMLElement).style.right = 0 + 'px'
  }

  // 跳转详情
  const onclickDe = (id: string) => {
    history.push('/detail/' + id);
  }
  return (
    <div className={styles.home}>
      <div className={styles.l}>
        {
          [...new Set(arr)].map((item, index) => {
            return <div key={index} className={styles.navlist}>
              <h5 className={styles.h5}>{item}</h5>
              {
                list.filter(it => it.Spelling.slice(0, 1) === item).map(item => {
                  return <div key={item.MasterID} className={styles.list}
                  >
                    <img src={item.CoverPhoto} alt="" onClick={() => { onclickXi(item.MasterID) }} />
                    <span>{item.Name}</span>
                  </div>
                })
              }
            </div>
          })
        }
      </div>
      <ul className={styles.lous}>
        <li>#</li>
        {
          [...new Set(arr)].map((i, index) => {
            return <li key={index}
              // onClick={() => { onclickLou(index) }}
              onTouchStart={(e) => onTachstate(e, index)}
              onTouchMove={(e) => onTachmove(e, index)}
              onTouchEnd={(e) => onTachend(e, index)}
            >
              {i}
            </li>
          })
        }
      </ul>
      <div className={styles.rr} ref={uR}
        onTouchStart={(e) => onTachstates(e)}
        onTouchMove={(e) => onTachmoves(e)}
        onTouchEnd={(e) => onTachends(e)}>
        {
          err.map((i, index) => {
            return <div key={index}>
              <b>{i.GroupName}</b>
              <div>
                {
                  i.GroupList && i.GroupList.map((j, indexs) => {
                    return <dl key={indexs}>
                      <dt><img src={j.Picture} alt="" onClick={() => { onclickDe(j.SerialID) }} /> </dt>
                      <dd>
                        <p>{j.AliasName}</p>
                        <b>{j.DealerPrice}</b>
                      </dd>
                    </dl>
                  })
                }
              </div>
            </div>
          })
        }
      </div>
    </div>
  )
};

export default IndexPage;












